<!--
 * Description: RFQ基础数据
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Chengming.Li
 * Date: 2020/11/25 12:07
-->
<template>
  <div class="rfq-solution-basedata">
    <!-- 查询条件 -->
    <BaseFunc
      :is-requesting="isRequesting"
      :query-form="queryForm"
      :visible.sync="advanceOptionDrawer"
      @query="query"
    >
      <!--抽屉内部查询表单-->
      <template>
        <el-form class="g-advance-drawer-form" label-width="100px" :model="queryForm" size="medium">
          <el-row>
            <!--rfqId-->
            <el-col :span="6">
              <el-form-item label="RFQ ID">
                <el-input v-model="queryForm.rfqId" clearable />
              </el-form-item>
            </el-col>

            <!--rfq名称-->
            <el-col :span="6">
              <el-form-item label="RFQ名称">
                <el-input v-model="queryForm.rfqName" clearable />
              </el-form-item>
            </el-col>
            <!--solution-->
            <el-col :span="6">
              <el-form-item label="Solution">
                <el-input v-model="queryForm.solution" clearable />
              </el-form-item>
            </el-col>

            <!--tempmodel-->
            <el-col :span="6">
              <el-form-item label="Temp-Model">
                <el-input v-model="queryForm.tempModel" clearable />
              </el-form-item>
            </el-col>
            <!--tempModelNumber-->
            <el-col :span="6">
              <el-form-item label="TempModelNumber">
                <el-input v-model="queryForm.tempModelNumber" clearable />
              </el-form-item>
            </el-col>
            <!-- state列 -->
            <el-col :span="6">
              <el-form-item label="进度状态">
                <el-select
                  v-model="queryForm.state"
                  clearable
                  :placeholder="$t('select.placeholder')"
                >
                  <el-option
                    v-for="item in $store.getters['dict/dictOptions']('SolutionStatus')"
                    :key="item.code"
                    :label="item.value"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 是否检查列 -->
            <el-col :span="6">
              <el-form-item label="检查状态">
                <el-select
                  v-model="queryForm.checkState"
                  clearable
                  :placeholder="$t('select.placeholder')"
                >
                  <el-option label="未检查" :value="null" />
                  <el-option label="未通过" :value="0" />
                  <el-option label="已通过" :value="1" />
                </el-select>
              </el-form-item>
            </el-col>
            <!--platform-->
            <el-col :span="6">
              <el-form-item label="平台">
                <el-input v-model="queryForm.platform" clearable />
              </el-form-item>
            </el-col>

            <!--version-->
            <el-col :span="6">
              <el-form-item label="版本">
                <el-input v-model="queryForm.version" clearable />
              </el-form-item>
            </el-col>

            <!--屏幕尺寸-->
            <el-col :span="6">
              <el-form-item label="屏幕尺寸">
                <el-input v-model="queryForm.lcd" clearable />
              </el-form-item>
            </el-col>

            <!--PBM负责人-->
            <el-col :span="6">
              <el-form-item :label="$t('FdData.pbmOwner')">
                <el-select
                  v-model="queryForm.pbmOwner"
                  clearable
                  filterable
                  :placeholder="$t('select.placeholder')"
                >
                  <el-option
                    v-for="item in $store.getters['user/getPbmUserSimpleCollects']"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId"
                  >
                    <span style="float: left;">{{ item.userName }}</span>
                    <span style="float: right; color: #b4b4b4; font-size: 12px">
                      {{ item.gcmFunction + ' ' + item.team }}
                    </span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!--创建人-->
            <el-col :span="6">
              <el-form-item label="创建人">
                <el-input v-model="queryForm.createUser" clearable />
                <!-- <el-select
                  v-model="queryForm.createUser"
                  clearable
                  filterable
                  :placeholder="$t('select.placeholder')"
                >
                  <el-option
                    v-for="item in $store.getters['user/getUserSimpleCollects']"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId"
                  >
                    <span style="float: left;">{{ item.userName }}</span>
                    <span style="float: right; color: #b4b4b4; font-size: 12px">
                      {{ item.team }}</span>
                 </el-option>
                </el-select> -->
              </el-form-item>
            </el-col>
            <!--修改人-->
            <el-col :span="6">
              <el-form-item label="修改人">
                <el-input v-model="queryForm.modifyUser" clearable />
                <!-- <el-select
                  v-model="queryForm.modifyUser"
                  clearable
                  filterable
                  :placeholder="$t('select.placeholder')"
                >
                  <el-option
                    v-for="item in $store.getters['user/getUserSimpleCollects']"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId"
                  >
                    <span style="float: left;">{{ item.userName }}</span>
                    <span style="float: right; color: #b4b4b4; font-size: 12px">
                      {{ item.team }}</span>
                  </el-option>
                </el-select> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </BaseFunc>

    <!--数据表格-->
    <BaseTable
      :is-requesting="isRequesting"
      :page-number.sync="pageNumber"
      :page-size.sync="pageSize"
      :table-data="tableData"
      :total="total"
      @query="query"
    >
      <!-- 左浮动 -->
      <template slot="header">
        <!--序号列-->
        <el-table-column align="center" fixed :label="$t('table.NO')" min-width="50px">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
      </template>

      <template>
        <!--rfqId列-->
        <el-table-column
          align="center"
          label="RFQ ID"
          min-width="200px"
          prop="rfqId"
          show-overflow-tooltip
          sortable
        />
        <!--rfq名称列-->
        <el-table-column
          align="center"
          label="RFQ名称"
          min-width="200px"
          prop="rfqName"
          show-overflow-tooltip
          sortable
        />
        <!--TotalRFQ ID-->
        <el-table-column
          align="center"
          label="TotalRFQ ID"
          min-width="200px"
          prop="totalRfqId"
          show-overflow-tooltip
          sortable
        />
        <!--bu类型列-->
        <el-table-column
          align="center"
          :label="$t('FdData.bu')"
          min-width="100px"
          prop="bu"
          sortable
        />
        <!--solution列-->
        <el-table-column
          align="center"
          label="Solution"
          min-width="250px"
          prop="solution"
          show-overflow-tooltip
          sortable
        />
        <!--tempmodel列-->
        <el-table-column
          align="center"
          label="Temp-Model"
          min-width="250px"
          prop="tempModel"
          show-overflow-tooltip
          sortable
        />
        <!--tempModelNumber列-->
        <el-table-column
          align="center"
          label="Temp-Model-Number"
          min-width="250px"
          prop="tempModelNumber"
          show-overflow-tooltip
          sortable
        />
        <!--平台列-->
        <el-table-column align="center" label="平台" min-width="200px" prop="platform" sortable />
        <!--版本列-->
        <el-table-column align="center" label="版本" min-width="200px" prop="version" sortable />

        <!--屏幕尺寸列-->
        <el-table-column align="center" label="屏幕尺寸" min-width="200px" prop="lcd" sortable />

        <!-- description列 -->
        <el-table-column
          align="center"
          label="描述"
          min-width="200px"
          prop="description"
          sortable
        />

        <!--专案PBM负责人列-->
        <el-table-column align="center" :label="$t('FdData.pbmOwner')" min-width="100px">
          <template slot-scope="scope">
            <span>
              {{ $store.getters['user/getUserNameById'](scope.row.pbmOwner) || $t('result.none') }}
            </span>
          </template>
        </el-table-column>

        <!--创建人-->
        <el-table-column align="center" :label="$t('Cbom.createUser')" min-width="200px" sortable>
          <template slot-scope="scope">
            <span>{{ $store.getters['user/getUserNameById'](scope.row.createUser) }}</span>
          </template>
        </el-table-column>

        <!--创建时间-->
        <el-table-column
          align="center"
          :label="$t('Cbom.createTime')"
          min-width="200px"
          prop="createTime"
          sortable
        />

        <!--修改人-->
        <el-table-column align="center" :label="$t('Cbom.modifyUser')" min-width="200px" sortable>
          <template slot-scope="scope">
            <span>{{ $store.getters['user/getUserNameById'](scope.row.modifyUser) }}</span>
          </template>
        </el-table-column>

        <!--修改时间-->
        <el-table-column
          align="center"
          :label="$t('Cbom.modifyTime')"
          min-width="200px"
          prop="modifyTime"
          sortable
        />
      </template>

      <!-- 右浮动 -->
      <template slot="end">
        <!-- 状态列 -->
        <el-table-column align="center" fixed="right" label="进度状态" min-width="120px">
          <template slot-scope="scope">
            <span v-if="scope.row.state === 10" class="tag-blue">
              {{ '已创建' }}
            </span>
            <span v-else-if="scope.row.state === 20">
              {{ '已分配' }}
            </span>
            <span v-else-if="scope.row.state === 30">
              {{ '已检查' }}
            </span>
            <span v-else-if="scope.row.state === 40" class="tag-green">
              {{ '已发送' }}
            </span>
            <span v-else-if="scope.row.state === 50" class="tag-green">
              {{ '已完成' }}
            </span>
          </template>
        </el-table-column>
        <!--检查是否通过列  -->
        <el-table-column align="center" fixed="right" label="检查状态" min-width="120px">
          <template slot-scope="scope">
            <span v-if="scope.row.checkState === 1" class="tag-green">
              {{ '已通过' }}
            </span>
            <span v-else-if="scope.row.checkState === 0" class="tag-red">
              {{ '已驳回' }}
            </span>
            <span v-else class="tag-darkBlue">
              {{ '未检查' }}
            </span>
          </template>
        </el-table-column>
        <!--操作列-->
        <el-table-column
          align="center"
          fixed="right"
          :label="$t('table.operate')"
          min-width="240px"
        >
          <template slot-scope="scope">
            <el-button
              v-if="$hasPer('view')"
              size="mini"
              type="text"
              @click="rowView(scope.$index, scope.row)"
            >
              <i class="el-icon-view el-icon--right"></i>
              {{ $t('button.view') }}
            </el-button>
            <el-button
              v-if="$hasPer('check')"
              :disabled="scope.row.state > 20"
              size="mini"
              type="text"
              @click="changeCheckState(scope.row)"
            >
              <i class="el-icon-finished el-icon--right"></i>
              检查
            </el-button>
            <el-button
              v-if="$hasPer('sent')"
              :disabled="scope.row.state != 30 || scope.row.checkState != 1"
              size="mini"
              type="text"
              @click="send(scope.row)"
            >
              <i class="el-icon-position el-icon--right"></i>
              发送
            </el-button>
            <el-button
              v-if="$hasPer('export')"
              size="mini"
              type="text"
              @click="rowDown(scope.$index, scope.row)"
            >
              <i class="el-icon-download el-icon--right"></i>
              {{ $t('button.down') }}
            </el-button>
          </template>
        </el-table-column>
      </template>
    </BaseTable>
    <!-- check对话框 -->
    <BaseDialog
      v-if="checkDialogVisible"
      title="检查"
      :visible.sync="checkDialogVisible"
      width="400px"
    >
      <RfqCheckDialog
        :rowData="currentRowData"
        @cancel="checkDialogVisible = false"
        @update:State="pageDataInit"
      />
    </BaseDialog>
    <!-- 对比对话框 -->
  </div>
</template>

<script>
import { RfqInfoPageList, RfqSendToDP } from '@/api/rfq/rfq'
import RfqCheckDialog from './RfqCheckDialog'
import { fileExportRfqData } from '@/api/rfq/rfq'

export default {
  name: 'RfqBaseData',
  components: { RfqCheckDialog },
  props: {
    rfqDataType: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      // 正在查询
      isRequesting: false,
      // 高级查询选项抽屉弹出标识
      advanceOptionDrawer: false,
      // 页码
      pageNumber: 1,
      // 页展示行数
      pageSize: 10,
      // 总行数
      total: 0,
      // 表格数据
      tableData: [],
      // 查询表单对象
      queryForm: {
        rfqId: '',
        rfqName: '',
        tempModel: '',
        tempModelNumber: '',
        version: '',
        state: '',
        platform: '',
        modifyUser: '',
        modifyTime: '',
        lcd: '',
        description: '',
        createUser: '',
        createTime: '',
        solution: this.rfqDataType,
        checkState: ''
      },
      // check对话框
      checkDialogVisible: false,
      // 当前行数据
      currentRowData: {}
    }
  },
  computed: {},
  watch: {},
  created() {
    this.pageDataInit()
  },
  mounted() {},
  methods: {
    /* 页面数据初始化*/
    pageDataInit() {
      this.query()
    },
    /* 查询表格数据*/
    async query() {
      try {
        this.isRequesting = true
        this.advanceOptionDrawer = false
        const { data: res } = await RfqInfoPageList({
          pageCondition: this.queryForm,
          pageNumber: this.pageNumber,
          pageSize: this.pageSize
        })
        this.tableData = res.list
        this.total = res.total
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    // 行查看
    rowView(index, rowData) {
      this.$bus.$emit('rfq-detail-view', index, rowData)
    },
    // 更改check状态
    changeCheckState(rowData) {
      this.currentRowData = rowData
      if (this.rfqDataType === '1') {
        this.checkDialogVisible = true
      } else if (this.rfqDataType === '0') {
        this.$bus.$emit('rfq-compare-view', rowData)
      }
    },
    // 发送
    async send(row) {
      try {
        await this.$confirmBox(this.$t('button.send'), 'success')
        this.isRequesting = true
        await RfqSendToDP(
          {
            rfqId: row.rfqId,
            version: row.version
          },
          { msgSuccess: true, msgError: true }
        )
        this.pageDataInit()
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    // 下载
    async rowDown(index, row) {
      try {
        await this.$confirmBox(this.$t('button.down'), 'success')
        this.isRequesting = true
        const res = await fileExportRfqData(
          { rfqId: row.rfqId, version: row.version },
          { downExcelFile: true, msgSuccess: true, msgError: true }
        )
        await this.$downFile(res)
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.rfq-solution-basedata {
  height: 100%;
}
</style>
